@mixin sim-handle-arrow($width, $height, $left, $top)
  &:after
    content: ' '
    position: absolute
    top: $top
    left: $left - 5
    width: 0
    height: 0
    border-top: $height/2 solid transparent
    border-bottom: $height/2 solid transparent
    border-right: $width solid #444
    border-left: 0
  &.active:after 
    content: ' '
    left: $left + 5
    border-right: 0
    border-left: $width solid #999

@mixin sim-btn-arrow-base($width, $height, $left, $top)
  &:after
    content: ' '
    position: absolute
    top: $top
    left: $left - 5
    width: 0
    height: 0
    border-top: $height/2 solid transparent
    border-bottom: $height/2 solid transparent

@mixin sim-btn-arrow-left($width, $height, $left, $top)
  +sim-btn-arrow-base($width, $height, $left, $top)
  &:after
    border-left: $width solid #666
    border-right: 0

@mixin sim-btn-arrow-right($width, $height, $left, $top)
  +sim-btn-arrow-base($width, $height, $left, $top)
  &:after
    border-right: $width solid #666
    border-left: 0

#sim-overlay, #sim-container, #sim-handle
  display: none
  position: absolute
  top: 0
  width: 100%
  height: 100%
  background: transparent
  z-index: 197

#sim-container
  right: 0
  background: black
  opacity: 0.1
  z-index: 198

#sim-handle
  cursor: pointer
  top: 50%
  right: 0px
  width: 90px
  height: 160px
  margin-top: -80px

  border-top: 2px solid #777
  border-bottom: 2px solid #777
  border-left: 2px solid #777
  background: #ccc
  +border-left-radius(10px)
  +opacity(0.5)
  +transition(background-color .1s)

  &:hover
    +opacity(0.5)
    background-color: darken(#ccc, 10%)

  +sim-handle-arrow(20px, 100px, (90px - 20)/2, (160px - 100)/2)

.sim-btn
  display: table
  position: absolute
  top: -100px
  left: 0px
  width: 0
  height: 0
  color: #888
  font-size: 22px
  text-align: center
  background: #dddddd
  border: 3px solid #bbb
  z-index: 199

  +border-radius(15px)
  +box-sizing(border-box)

  &.active
    color: white
    background: blue

  div, i
    display: table-cell
    vertical-align: middle
    text-align: left

  [class^="icon-"], [class*=" icon-"], [class^="foundicon-"], [class*=" foundicon-"]
    width: 48px
    padding-left: 15px
    color: #111
    font-size: 38px
    text-shadow: 0px 3px 3px rgba(74, 79, 77, 0.68)

.sim-btn[sim-data^="set:"], .sim-btn[sim-data^="cmd:"] 
  cursor: pointer
.sim-btn
  .custom
    cursor: pointer
    a, li
      cursor: pointer !important

.narrow 
  #sim-container
    top: 45px
  .sim-btn
    color: #555
    font-size: 16px
    border: 1px solid #bbb
    +border-radius(2px)
    [class^="icon-"], [class*=" icon-"], [class^="foundicon-"], [class*=" foundicon-"]
      font-size: 20px
      text-shadow: none
  .sim-btn[sim-data^="set:"]
    +sim-btn-arrow-left(8px, 16px, 280px, 15px)
  .sim-btn.anchored
    +sim-btn-arrow-right(8px, 16px, 280px, 15px)
    //   +sim-btn-arrow-right(8px, 16px, 10px, 15px)

  .sim-btn 
    .custom.dropdown
      top: 7px
      margin-bottom: 0px
      width: 100px
    &:hover
      z-index: 200
